<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap表单验证</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    body{
        margin: 1%;
        padding: 2%;
    }
</style>

<body>
    <form action="" class="form-row">
        <div class="form-group col-7">
            <label for="username">用户名</label>
            <input type="text" name="username" id="username" class="form-control is-invalid">
            <div class="valid-feedback">验证通过</div>
            <div class="invalid-feedback">验证不通过</div>
        </div>
        <div class="form-group col-7">
            <label for="password"> 密码</label>
            <input type="text" name="password" id="password" class="form-control is-valid">
            <div class="valid-feedback">验证密码通过</div>
            <div class="invalid-feedback">验证密码不通过</div>
        </div>
        <div class="form-group col-7">
            <div class="form-check">
                <input type="checkbox" name="checkbox" id="checkbox" class="form-check-input is-valid">
                <label for="checkbox" class="form-check-laber">用户协议</label>
                <div class="valid-feedback">用户协议</div>
                <div class="invalid-feedback">必须勾选</div>

            </div>
        </div>
    </form>
<!-- 单选框默认就会设计为选中一项, 未选中得情况几乎不可能发生 -->
    <form action="" class="was-validated">
        <div class="costom-control costom-checkbox">
            <input type="checkbox" name="costom-checkbox" id="costom-checkbox" class="costom-control-input" required>
            <label for="custom-check" class="custom-control-laber">用户协议</label>
            <div class="valid-feedback">已勾选用户协议!</div>
            <div class="invalid-feedback">必须勾选!</div>
        </div>
        <div class="costom-control constom-radio">
            <input type="radio" name="radio" id="radio1" class="costom-control-input" required>
            <label for="radio1" class="custom-control-laber">男</label>
        </div>
        <div class="costom-control constom-radio">
            <input type="radio" name="radio" id="radio2" class="costom-control-input" required>
            <label for="radio2" class="custom-control-laber">女</label>
            <div class="valid-feedback">有骨气</div>
            <div class="invalid-feedback">性别必须选择女</div>
        </div>

<!-- 选择框与单选框情况一样, 该样式难有用武之地 -->
        <div class="form-group">
            <select name="select" id="select" class="custom-select" required>
                <option value="aaa">aaa</option>
                <option value="bbb">bbb</option>
                <option value="ccc">ccc</option>
                <option value="ddd">ddd </option>
            </select>
            <div class="invalid-feedback">必须选择一项</div>
        </div>
        <div class="custom-file">
            <input type="file" name="file" id="file" class="custom-file-input" required>
            <label for="file" class="custom-file-label">选择文件</label>
            <div class="invalid-feedback">您还未提交身份材料</div>
        </div>
    </form>


    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    
</body>

</html>